<template>
  <div class="content">
    <div class="fc">
      <!-- 引入天气组件 -->
      <WeatherWidget />
    </div>
    <div class="realize">
      <router-view></router-view>
    </div>
  </div>
</template>

<script setup>
import WeatherWidget from "@/components/Weather/index.vue";
</script>

<style scoped lang="scss">
@use "@/styles/themes.scss";
.content {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  display: flex;

  .fc {
    margin: 0;
    width: 400px;
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid rgb(211, 210, 210);
    box-sizing: border-box;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
  }
}

.city {
      font-size: 20px;
      font-weight: bold;
      color: var(--Nav-hover-color);
      margin-bottom: 0px;
    }

.today-weather {
  text-align: left;
  margin-bottom: 20px;

  .weather-info {
    display: flex;
    align-items: center;
    justify-content: left;

    .weather-icon {
      font-size: 80px;
      color: var(--primary-color);
      margin-right: 15px;
      transition: transform 0.3s ease-in-out;
    }

    .weather-icon:hover {
      transform: scale(1.1);
    }


    .temperature {
      font-size: 40px;
      font-weight: bold;
      color: var(--primary-color);
      margin-bottom: 0px;
    }

    .details,
    .humidity,
    .wind {
      font-size: px;
      color: #616161;
      line-height: 1;
    }
  }
}

.realize {
      flex: 7;
      border-radius: 10px;
      background-color: rgb(248, 243, 243);
      display: flex;
    }

</style>
